<template>
	<view class="v2" style="text-align: center;">登录</view>
	<view class="v1">
		<view style="margin: 40rpx;">
			<uni-easyinput v-model="from1.username" prefixIcon="person" focus placeholder="请输入用户名"></uni-easyinput>
		</view>
		<view style="margin: 40rpx;">
			<uni-easyinput  type="password"  v-model="from1.password" prefixIcon="locked" focus placeholder="请输入密码"></uni-easyinput>
		</view> 
		<view class="v3">
			<button type="primary" @click="fetchUserLogin()">登录</button>
		</view>
		<navigator url="/pages/zhuce/zhuce" style="color:deepskyblue;" class="n1">前往注册</navigator>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const from1=ref({});

	function fetchUserLogin() {  
	    // 替换 'url' 为实际的 API URL  
	    const url = 'http://192.168.0.216:7070/user/deng';  
        
	    uni.request({ 
		
	        url: url,  
	        method: 'POST',	
	        data: from1.value,
	        success: (res) => {  
	            // 请求成功后的处理  
	            console.log('请求成功:', res.data);  
				if(res.data.flag==true){
					uni.showToast({  
	                title: '登录成功',  
	                icon: 'success',  
					
	                duration: 2000 }),
			
				uni.setStorageSync('user',res.data.shuju);  
				  
				
			
				let storedData = uni.getStorageSync('user').id;  
				console.log(storedData);
				
		
					 }else{
						uni.showToast({
						    title: '登录失败',  
						    icon: 'closeempty',  
						    duration: 2000 
				 })	};  
	            
	        
	            // 在这里可以添加更多的成功处理逻辑，比如页面跳转  
	        }
	       
	       
	       
	    });  
	}  
	
</script>

<style lang="scss">
	 .v1{
	 		 width: 80%;
	 		 position: relative;
	 		 top: 60px;
	 		 left: 50px;
	 }
	 .v2{
	 		 position: relative;
	 		 top: 50px;
	 		 font-size: 25px;
	 		 color: royalblue;
	 }
	 .v3{
	 		 position: relative;
	 		 left: 20px;
	 		 width: 530rpx;
	 }
	 .n1{
	 		 position: relative;
	 		 left: 20px;
	 }      
</style>
